/* 3 定义组件 */
import React, { Component } from 'react';
/* 7 引入样式表,且使用样式 */
import styles from './item.module.css'
/* 8 导入Link组件进行页面跳转 */
import { Link } from 'react-router-dom'
class Index extends Component {
    render() {
        return (
            /* 6 接受父组传递的值进行渲染  */

            <div className={styles.container}>
                {
                    this.props.playlists.map((item, index) => {
                        return (
                            /* 9 传递id到路由中 */
                            <Link to={`/detail?id=${item.id}`} key={index}>
                                <div className={styles.item}>
                                    <img src={item.coverImgUrl} alt="" />
                                    <p>{item.name}</p>
                                </div> 
                            </Link >
                        )
                    })
                }
            </div>

        );
    }
}

export default Index;
